<template>
    <a-skeleton :animation="true">
        <div :class="['right-top', { 'style': isCollapse }]">
            <a-skeleton-line :rows="1" :line-height="30" v-if="!chatDetail?.id"/>
            <div class="name flex justify-between" v-else>
                <div class="name-user">
                    <span>{{ chatDetail.name }}</span>
                    <span class="list">
                        <a-avatar-group>
                            <a-popover :title="item.name" v-for="(item, itemIndex) in chatDetail?.users" :key="item.id">
                                <ComAvatar :sex="userList?.find((child: UserInfoEntity) => child.id === item.id)?.sex" :name="item.initialLetter" :size="36"
									:style="{ marginLeft: itemIndex === 0 ? '' : '-6px' }"/>
                                <template #content>
									<p>邮箱地址: {{ item.email }}</p>
									<p>联系电话: {{ item.mobile }}</p>
                                </template>
                            </a-popover>
                        </a-avatar-group>
                    </span>
                    <span class="add-less" v-if="isAuth">
                        <i class="EachApp EachApp_jian1" @click="handleManageUser('add')"></i>
                        <i class="EachApp EachApp_jiajian-" @click="handleManageUser('less')"></i>
                    </span>
                </div>
				<ComTrigger v-model:popup-visible="popoverVisible" trigger="click" iconfont="EachApp_gengduo2" @handleBtn="popoverVisible = false; handleApp($event)" position="br" :translate="[0, 3]" v-if="isAuth">
                    <template #content>
                        <div class="item" @click="handleBtn('return')">归档会话</div>
                        <div class="item" style="color: #e54949" @click="handleBtn('del')">删除会话</div>
                    </template>
                </ComTrigger>
            </div>
        </div>
    </a-skeleton>
    <ComModal v-model:visible="modalVisible" title="选择成员" @handleCancel="myComponent = null; modalVisible = false" @handleSubmit="myComponentRef?.handleSubmit(); modalVisible = false">
        <component :is="myComponent" ref="myComponentRef" v-bind="$attrs" :userList="userList" :userChecked="chatDetail?.userIds" @handleSubmit="mitt.emit('handleSubmit', $event)" :creatorId="creatorId" :addLess="addLess"></component>
    </ComModal>
</template>
<script lang="ts" setup>
defineProps<{
    userList: UserInfoEntity[]
}>();
import ComAvatar from '@/components/ComAvatar.vue';
import ComModal from '@/components/ComModal.vue';
import ComTrigger from '@/components/ComTrigger.vue';
import * as ApiMsg from '@/api/im';
import mitt from "@/utils/bus";
import mixin from "@/mixins/index";
import { useUserStore } from '@/stores/modules/user';
import useEmitter from '@/hooks/useEmitter.ts';
import type { UserInfoEntity } from '@/entity/UserEntity';
import type { chatListEntity, chatDetailEntity, currentGroupInfoEntity, SendParamsEntity } from '@/entity/im/ImEntity';
interface ChatDetail {
    id: number;
    name: string;
    userIds: number[];
	creatorId: number;
	status: number;
	users: chatDetailEntity[];
}
const ChooseUser = defineAsyncComponent(() => import('./ChooseUser.vue'));
const myComponent = ref<Component | null>(null);
const myComponentRef = ref(null);
const { wsCache } = useCache();
const { handleMixinSubmit } = mixin();
const emit = defineEmits(['handleManageUser', 'sendMsg']);
const isCollapse = ref(true);
const chatDetail = ref<ChatDetail>({
    id: 0,
	status: 0,
    name: '',
	users: [],
    userIds: [],
	creatorId: 0,
}); // 会话详情
const modalVisible = ref(false);
const addLess = ref('');
const popoverVisible = ref(false);
// 是否有权限修改群成员
const isAuth = computed(() => {
    /*
        1、会话创建人是登录人本人
        2、群聊状态是正常
    */
    const userId = useUserStore().userInfo?.id;
    return chatDetail?.value?.creatorId === userId && chatDetail.value?.status === 0;
})

// 创建者id
const creatorId = computed(() => {
    return chatDetail.value?.users?.find((item: chatDetailEntity) => item.isCreator)?.id;
})

// 打开modal
const handleManageUser = (type: string) => {
    myComponent.value = ChooseUser;
    addLess.value = type;
    modalVisible.value = true;
}

// 按钮处理
const handleBtn = async (sendType: string) => {
    if(sendType === 'del'){
        popoverVisible.value = false;
        await handleMixinSubmit(ApiMsg.ApiChatDelete, chatDetail.value.id, '', true, '删除会话');
        emit('sendMsg', { sendType, topicId: chatDetail.value.id });
        mitt.emit('handleChatBtn', { sendType, ...chatDetail.value });
    }else if(sendType === 'return'){
        popoverVisible.value = false;
        await handleMixinSubmit(ApiMsg.ApiChatReturn, chatDetail.value.id, '', true, '归档');
        chatDetail.value.status = 1;
        mitt.emit('handleChatBtn', { sendType, ...chatDetail.value });
    }
}

// 会话详情
useEmitter.on('chatDetail', (e: ChatDetail) => {
    chatDetail.value = e;
})
</script>
<style lang="scss" scoped>
.right-top{
    border-bottom: var(--border);
    padding: 15px;
    height: 210px;
    position: relative;
    overflow: hidden;
    transition: all 0.1s ease-in-out;
    position: relative;
    &.style{
        height: 60px;
        transition: all 0.1s ease-in-out;
        .collapse{
            margin-top: -30px;
        }
    }
    &:hover{
        .collapse{
            opacity: 1;
        }
    }
    .collapse{
        font-weight: normal;
        font-size: 13px;
        text-align: center;
        color: var(--blue);
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translate(-50%, 0);
        z-index: 9;
        opacity: 0;
        &.style{
            transform: rotate(180deg);
        }
        i{
            color: #999;
        }
        cursor: pointer;
    }
    .name{
        font-size: 20px;
        font-weight: bold;
        height: 32px;
        line-height: 32px;
        margin-bottom: 15px;
        &-user{
            display: flex;
            align-items: center;
        }
        .more{
            color: #999;
            font-size: 18px;
        }
        .list{
            display: flex;
            padding: 0 10px 0 15px;
            overflow: initial;
            font-weight: normal;
            .item{
                width: 32px;
                height: 32px;
                border-radius: 50%;
                border: var(--border);
                font-size: 14px;
                justify-content: space-around;
                background: white;
                position: relative;
                overflow: initial;
                z-index: 999;
                &:first-child{
                    margin-left: 10px;
                }
                &:not(:first-child){
                    margin-left: -8px;
                    position: relative;
                }
                .creator{
                    position: absolute;
                    top: -20px;
                    color: #E4B301;
                    font-size: 26px;
                    z-index: -1000;
                }
            }
        }
        .add-less{
            display: flex;
            align-items: center;
            justify-content: space-around;
            :deep(.arco-avatar){
                display: flex;
                align-items: center;
                justify-content: space-around;
                margin-right: 3px;
                background-color: white;
                .arco-avatar-text{
                    transform: translateX(-50%) !important;
                }
            }
            .EachApp{
                font-size: 16px;
                font-weight: bold;
                color: #999;
                cursor: pointer;
                display: flex;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                align-items: center;
                justify-content: space-around;
                &:hover{
                    border: 1px dashed #999;
                    //background-color: rgb(201,205,212);
                }
            }
        }
    }
    .other{
        padding: 20px;
        font-size: 14px;
        font-weight: normal;
        background: #f1f1f1;
        height: calc(100% - 52px);
        overflow: auto;
    }
}

</style>
